<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增用户页面</title>
  <script src="jquery-3.6.0.js"></script>
</head>
<body>
用户名：<input type="text" id="username"><br>
密码：<input type="password" id="password"><br>
年龄：<input type="text" id="age"><br>
<button>新增用户</button>
</body>
<script>
  $(function (){
    $("button").click(function (){
      let username = $("#username").val();
      let password = $("#password").val();
      let age = $("#age").val();

      $.ajax({                    // 标准化模板，不用死记  // jquery中的任何属性名称，不能错误，并且一定区分大小写，所以建议在开发中，尽可能使用ctrl+c复制在修改
        url:"/insertUserServlet",   // 请求路径
        type:"post",            // 请求的方式，不区分大小写
        async:true,             // 是否异步，true是默认值，false为同步请求
        cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
        datatype:"json",        // 返回类型，text文本、html页面、json数据
        data:{                  // 传递给后台参数名和参数值
          username:username,
          password:password,
          age:age
          },
        success:function(response){        // 如果后端响应成功，则会返回所有数据给到response对象中
          console.log(response);
          alert(response.msg);
          if(response.code === 200) {
            window.location.href="index.html"
          }
        },
        error:function(response){          // 如果请求失败，则会执行error函数
          alert("出错" + response);
        }
      });
    });
  });
</script>
</html>